<!--
 * @Author: hq
 * @Date: 2022-06-01 15:18:44
 * @LastEditors: hq
 * @LastEditTime: 2022-08-01 14:50:48
 * @Description: 订单详情
 * @version: 1.0
-->
<template>
  <div v-if="objData.buyer">
    <div class="title">订单信息</div>
    <div class="row">
      <div class="col">
        <div>订单号：</div>
        <div>{{ objData.oid }}</div>
      </div>
      <div class="col">
        <div>状态：</div>
        <div>{{ objData.status }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>下单时间：</div>
        <div>{{ objData.create_time }}</div>
      </div>
      <div class="col">
        <div>支付时间：</div>
        <div>{{ objData.pay_time }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>总金额：</div>
        <div>{{ objData.total_amount }}</div>
      </div>
      <div class="col">
        <div>总优惠金额：</div>
        <div>{{ objData.discount }}</div>
      </div>
    </div>
    <div class="title">下单信息</div>
    <div class="row">
      <div class="col">
        <div>用户id：</div>
        <div>{{ objData.buyer.id }}</div>
      </div>
      <div class="col">
        <div>昵称：</div>
        <div>{{ objData.buyer.nickname }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>配送方式：</div>
        <div v-if="objData.shipping_way === 1" class="red">邮寄</div>
        <div v-if="objData.shipping_way === 2" class="green">到店</div>
      </div>
      <div class="col">
        <div>收货人：</div>
        <div>{{ objData.address.consignee }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>手机号：</div>
        <div>{{ objData.buyer.phone }}</div>
      </div>
      <div class="col">
        <div>收货地址：</div>
        <div>{{ objData.address.region }}{{ objData.address.address }}</div>
      </div>
    </div>
    <div class="title">商品信息</div>
    <el-table
      border
      :data="objData.goods"
      :header-cell-style="{
        'text-align': 'center',
      }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column prop="pid" label="id" min-width="15%"> </el-table-column>

      <el-table-column label="缩略图" min-width="15%">
        <template slot-scope="scope">
          <div class="slt">
            <el-popover placement="right" width="200" trigger="hover">
              <img class="tbImg1" :src="scope.row.thumb.src" alt="" />
              <img
                class="tbImg"
                slot="reference"
                :src="scope.row.thumb.src"
                alt=""
              />
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名" min-width="20%">
      </el-table-column>
      <el-table-column prop="spec_name" label="规格" min-width="20%">
      </el-table-column>
      <el-table-column prop="num" label="数量" min-width="20%">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { order_detail } from "@/api/mall_management";
export default {
  props: ["rowData"],
  data() {
    return {
      objData: {},
    };
  },
  methods: {
    async order_detail() {
      const { data, err } = await order_detail({
        oid: this.rowData.oid,
      });
      if (err === 0) {
        this.objData = data;
      }
    },
  },
  created() {
    this.order_detail();
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;

  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
  }
}
.blod {
  font-weight: bold;
  margin-bottom: 20px;
}
.title {
  font-weight: bold;
  margin-bottom: 20px;
}
</style>
